{% extends "Cart/base.html" %}

{% block title %}支付界面{% endblock %}

{% block file %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/jquery-1.9.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='css/folder/holder.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-getUrlParam.js') }}"></script>
    <link href="{{ url_for('static',filename='css/folder/bootstrap.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ url_for('static',filename='css/folder/bootstrap.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/folder/orderConfirm.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/Cart/2.css') }}">
{% endblock %}

{% block body %}
<!--返回首页-->
<div id="tui">
    <span id="sp11"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp;/
    <span id="sp22"><a style="text-decoration: none;color: black" id="hello2" href="../Cart/cart.html">购物车</a></span>
</div>
<!--结算界面-->
<div class="container">
    <div class="col-md-offset-1 col-md-10">
        <div class="col-md-4">
            <div class="col-md-12 order-bar-active" style="background-color: #CCCCCC;color: black">
                1.确认订单信息
                <span class="pull-right"><span class="fa fa-chevron-right"></span></span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-12 order-bar-undo" style="background-color: #428BCA;border-radius: 5px;color: white">
                2.在线支付
                <span class="pull-right"><span class="fa fa-chevron-right"></span></span>
            </div>
        </div>
        <div class="col-md-12" style="margin-top: 20px;height: 300px">
            <div style="background-color:#428BCA;height: 45px ">
                <p style="color: white;font-size: 16px;height: 22px;padding-left:20px;padding-top: 10px">订单详情:</p>
            </div>
            <div style="background-color: white;height: 300px;display: flex">
                <img style="width: 210px;height: 300px;margin-left: 100px" src="../../static/image/对号.jpg">
                <div style="margin-left: 100px">
                    <div style="width: 200px;margin-top: 15px">
                        <div style="font-weight: bold">订单编号</div>
                        <span style="margin-left: 25px" id="dingdanhao"></span>
                    </div>
                    <div>
                        <div style="font-weight: bold">下单时间</div>
                        <span style="margin-left: 25px" id="dingdantime"></span>
                    </div>
                    <div>
                        <div style="font-weight: bold">合计金额</div>
                        <span style="margin-left: 25px;font-weight: bold;font-size:18px;color: orange" id="paycash"></span>
                    </div>
                    <div>
                        <div style="font-weight: bold">收货人</div>
                        <span style="margin-left: 25px" id="shouhuoname"></span>
                    </div>
                    <div style="margin-top: 10px">
                        <div>彩阳书店感谢您的支持，祝您购书愉快！</div>
                    </div>
                </div>
            </div>
            <button id="btnconfirm" style="background-color:#428BCA;width: 106px;height: 45px;border-radius: 5px;border: none;
            margin-top: 10px;margin-left:780px;color: white;font-size: 20px">确认付款</button>
        </div>
    </div>
</div>
<!--时间转换-->
<script type="text/javascript">
    function timeChange(UTCDateString){
        if (!UTCDateString) {
            return '-';
        }
        function formatFunc(str) {
            return str > 9 ? str : '0' + str
        }
        let date2 = new Date(UTCDateString);
        console.log('时间', date2)
        let year = date2.getFullYear();
        let mon = formatFunc(date2.getMonth() + 1);
        let day = formatFunc(date2.getDate());
        let hour = date2.getHours();
        hour = hour >= 12 ? hour : hour; // 24小时制
        hour = formatFunc(hour);
        let min = formatFunc(date2.getMinutes());
        let sec = formatFunc(date2.getSeconds());
        let dateStr = year + '年' + mon + '月' + day + '日 ' + hour + ':' + min;
        return dateStr;
    }
</script>
<!--显示订单详细信息-->
<script type="text/javascript">
    $(document).ready(function () {
        document.getElementById("dingdanhao").innerHTML=new Date().valueOf() + Math.floor(Math.random() * 1000)+$.getUrlParam("oid");
        document.getElementById("paycash").innerHTML="￥"+$.getUrlParam("total_price");
        let datatime=timeChange($.getUrlParam("order_time"));
        console.log(datatime)
        document.getElementById("dingdantime").innerHTML=datatime;
        document.getElementById("shouhuoname").innerHTML=$.getUrlParam("recv_name");
    });
</script>
<!--跳转到订单详情-->
<script>
    layui.use('layer', function(){
        var layer = layui.layer;

        //点击支付按钮
        document.getElementById("btnconfirm").onclick=function () {
            layer.confirm('确定支付?', {icon: 3, title:'提示'}, function(index){
                querystring=window.location.search;
                urlParams=new URLSearchParams(querystring)
                oid=urlParams.get('oid')
                $.ajax({
                    url:"/product/payment/"+oid,
                    type:"post",
                    dataType:"json",
                    success:function (res){
                        if(res.state==200){
                            console.log("修改成恒公")
                        }
                    }
                })
                location.href="{{ url_for('product.showOrder') }}";
                layer.close(index);
            });
        }
    });
</script>
{% endblock %}